<%@ page import="java.net.URLDecoder" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link href="http://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/css/default.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/css/styles.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/bootstrap.min.js">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/css/slick.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/slicknav.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-3.4.1.min.js"></script>
</head>
<body>
<header class="htmleaf-header">
    <h1>用户登录</h1>
    <div class="htmleaf-links">
        <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
        <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/css3/ui-design/201507242291.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
    </div>
</header>
<div class='login'>
    <div class='login_title'>
        <span>登录您的账户</span>
    </div>
    <div class='login_fields'>
        <div class='login_fields__user'>
            <div class='icon'>
                <img src='${pageContext.request.contextPath}/statics/img/user_icon_copy.png'>
            </div>
            <input placeholder='输入您的用户名' type='text' style="width: 320px" name="userName" id="username">
            <div class='validation'>
                <img src='${pageContext.request.contextPath}/statics/img/tick.png'>
            </div>
            </input>
        </div>
        <div class='login_fields__password'>
            <div class='icon'>
                <img src='${pageContext.request.contextPath}/statics/img/lock_icon_copy.png'>
            </div>
            <input placeholder='输入您的密码' type='password' style="width: 320px" name="password" id="pwd">
            <div class='validation'>
                <img src='${pageContext.request.contextPath}/statics/img/tick.png'>
            </div>
        </div>
        <div class='login_fields__submit'>
            <input type='submit' value='登录' onclick="login()">
            <div class='forgot'>
                <a href='#'>忘记密码?</a>
            </div>
        </div>
    </div>
    <div class='success'>
        <h2>Authentication Success</h2>
        <p>Welcome back</p>
    </div>
    <div class='disclaimer'>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper laoreet placerat. Nullam semper auctor justo, rutrum posuere odio vulputate nec.</p>
    </div>
</div>
<div class='authent'>
    <img src='${pageContext.request.contextPath}/statics/img/puff.svg'>
    <p>Authenticating...</p>
</div>
<script>
    function login() {
        var username = document.getElementById("username");
        var pwd = document.getElementById("pwd");
        if (username.value == ""){
            alert("用户名不能为空")
            return false;
        }
        if (pwd.value == ""){
            alert("密码不能为空")
            return false;
        }else {
            $.ajax({
                url:"${pageContext.request.contextPath}/user/login",
                type:"POST",
                dataType:"Json",
                data:{userName:username.value,password:pwd.value},
                success:function (data) {
                    if (data){
                        self.location=document.referrer;
                    }else {
                        alert("用户名或密码错误")
                    }
                }
            })
        }
    }
</script>
</body>
</html>
